
<template>

  <div>
    <h2 style="margin:20px">课程表</h2>
    <!---------------------------------------------------查询---------------------------------->
    <div id="table-area">
      <el-form
        ref="search"
        :model="search"
        label-position="top"
        :rules="rules"
      >
        <el-row
          type="flex"
          justify=""
          style="margin-top:35px"
        >
          <el-col :span="5">
            <el-form-item prop="classId">
              <el-select
                v-model="search.classId"
                filterable
                placeholder="请选择您要查看的班级"
                style="width: 240px;margin-right:30px"
              >
                <el-option
                  v-for="j in Class"
                  :key="j.classId"
                  :label="j.className"
                  :value="j.classId"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item
              prop="Time"
              style="width: 240px;"
            >
              <el-date-picker
                v-model="search.Time"
                type="date"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd"
                placeholder="请选择您要查看的日期"
              />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-button
              type="primary"
              @click="getSchedule('search')"
            >确定</el-button>
          </el-col>
          <el-col>
            <el-button
              v-if="jurisdiction==='教务主任'"
              style="float: right;"
              type="primary"
              class="inline-block"
              @click="handleOpen('添加排课', 1)"
            >添加排课</el-button>
          </el-col>

          <el-col :span="5">
            <el-button
              v-if="jurisdiction==='教务主任'"
              style="float: right;"
              type="primary"
              class="inline-block"
              @click="handleOpenA('staff')"
            >删除排课</el-button>
          </el-col>
        </el-row>

      </el-form>

      <!---------------------------------------------------查询---------------------------------->

      <!-- ---------------------------------------------课表展示区-------------==============================---------------- -->

      <el-table
        :data="timeData"
        stripe
        style="width: 100%;margin-top:0px"
      >
        <el-table-column
          min-width="15%"
          label="周"
          fixed="left"
          prop="label"
          align="center"
        />

        <el-table-column
          label="早上"
          align="center"
        >
          <el-table-column
            v-for="(v,i) in titleData"
            v-if="v.label==='早上'"
            :key="i"
            min-width="30%"
            align="center"
          >
            <template
              slot="header"
              slot-scope="scope"
            >
              <div class="tabletitle-timeline">
                第{{ v.count }}节 <br>
                {{ v.starttime }}-{{ v.endTime }}
              </div>
            </template>
            <template slot-scope="scope">
              <div>
                <div v-if="timeShow">
                  {{ scope.row[sbjectKey[i]] }}<br>
                  {{ scope.row[teacherKey[i]] }}
                </div>

              </div>
            </template>
          </el-table-column>
        </el-table-column>

        <el-table-column
          label="下午"
          align="center"
        >
          <el-table-column
            v-for="(v,i) in titleData"
            v-if="v.label==='下午'"
            :key="i"
            min-width="30%"
            align="center"
          >
            <template
              slot="header"
              slot-scope="scope"
            >
              <div class="tabletitle-timeline">
                第{{ v.count }}节 <br>
                {{ v.starttime }}-{{ v.endTime }}
              </div>
            </template>
            <template slot-scope="scope">
              <div>
                <div v-if="timeShow">
                  {{ scope.row[sbjectKey[i]] }}<br>
                  {{ scope.row[teacherKey[i]] }}
                </div>

              </div>
            </template>
          </el-table-column>
        </el-table-column>

        <el-table-column
          label="晚上"
          align="center"
        >
          <el-table-column
            v-for="(v,i) in titleData"
            v-if="v.label==='晚上'"
            :key="i"
            min-width="25%"
            align="center"
          >
            <template
              slot="header"
              slot-scope="scope"
            >
              <div class="tabletitle-timeline">
                第{{ v.count }}节 <br>
                {{ v.starttime }}-{{ v.endTime }}
              </div>
            </template>
            <template slot-scope="scope">
              <div>
                <div v-if="timeShow">
                  {{ scope.row[sbjectKey[i]] }}<br>
                  {{ scope.row[teacherKey[i]] }}
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
    </div>

    <!-- ---------------------------------------------课表展示区-------------==============================---------------- -->

    <!----------------------------------------------------- 添加课程区域 弹框----------------------------------------------------->
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="dialogFormVisible"
      :before-close="handleClose"
    >

      <el-form
        ref="staff"
        :model="staff"
        label-position="top"
        :rules="rules"
      >

        <el-form-item
          label="上课日期"
          :label-width="formLabelWidth"
          prop="scheduleTimeDay"
        >
          <el-date-picker
            v-model="staff.scheduleTimeDay"
            type="date"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
            placeholder="选择日期时间"
            style="width: 100%;"
          />
        </el-form-item>

        <el-form-item
          prop="scheduleClassTime"
          label="第几节开始的课"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="staff.scheduleClassTime"
            autocomplete="off"
            @blur="handlejudge('staff')"
          />
          <!-- @click.native="" -->
        </el-form-item>

      </el-form>

      <el-form
        ref="staff"
        :model="staff"
        label-position="top"
        :rules="rules"
      >
        <el-form-item
          prop="scheduleClassId"
          label="班级名称"
          :label-width="formLabelWidth"
        >
          <el-select
            v-model="staff.scheduleClassId"
            filterable
            placeholder="请选择"
            style="width: 100%;"
          >
            <el-option
              v-for="j in Class"
              :key="j.classId"
              :label="j.className"
              :value="j.classId"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          prop="scheduleRoomId"
          label="使用房间"
          :label-width="formLabelWidth"
        >
          <el-select
            v-model="staff.scheduleRoomId"
            filterable
            placeholder="请选择"
            style="width: 100%;"
          >
            <el-option
              v-for="j in room"
              :key="j.roomId"
              :label="j.roomLoc"
              :value="j.roomId"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          prop="scheduleTeacherId"
          label="授课老师"
          :label-width="formLabelWidth"
        >
          <el-select
            v-model="staff.scheduleTeacherId"
            filterable
            placeholder="请选择"
            style="width: 100%;"
          >
            <el-option
              v-for="j in staff0"
              :key="j.staffId"
              :label="j.staffName"
              :value="j.staffId"
            />
          </el-select>
        </el-form-item>

        <el-form-item
          prop="scheduleColor"
          label="排课显示颜色"
          :label-width="formLabelWidth"
        >

          <el-color-picker v-model="staff.scheduleColor" />
        </el-form-item>
        <el-form-item
          prop="scheduleFontColor"
          label="字体颜色"
          :label-width="formLabelWidth"
        >
          <!-- <el-input v-model="staff.fontColor" autocomplete="off" /> -->
          <el-color-picker v-model="staff.scheduleFontColor" />
        </el-form-item>

      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="primary"
          @click="handleClose"
        >取 消</el-button>

        <el-button
          v-if="editType == 1"
          type="primary"
          @click="HandleAddSchedule('staff')"
        >添 加</el-button>
      </div>
    </el-dialog>
    <!----------------------------------------------------- 添加课程区域 弹框----------------------------------------------------->

    <!----------------------------------------------------- 删除课程区域 弹框----------------------------------------------------->
    <el-dialog
      title="删除排课"
      :close-on-click-modal="false"
      :visible.sync="dialogTableVisible"
      :before-close="handleCloseA"
    >
      <el-table
        v-loading="listLoading"
        :data="list.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
      >
        <el-table-column
          label="序号"
          type="index"
          align="center"
        >
          <template scope="scope">
            <span>{{ (currentPage - 1) * pagesize + scope.$index + 1 }}</span>
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          label="班级名称"
        >
          <template slot-scope="scope">
            <el-popover
              trigger="hover"
              placement="top"
            >
              <p>上课房间: {{ scope.row.scheduleRoomName }}</p>
              <p>授课教师: {{ scope.row.scheduleTeacherName }}</p>
              <div
                slot="reference"
                class="name-wrapper"
              >
                <el-tag size="medium">{{ scope.row.scheduleClassName }}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="scheduleTimeDay"
          label="上课日期"
        />
        <el-table-column
          align="center"
          prop="scheduleClassTime"
          label="第几节的课"
        />
        <!-- <el-table-column align="center" prop="room.roomLoc" label="使用房间" /> -->

        <el-table-column
          align="center"
          prop="scheduleWeekName"
          label="周几"
        >
          <template slot-scope="scope">

            <span v-if="scope.row.scheduleWeekName=='1'">周一</span>
            <span v-if="scope.row.scheduleWeekName=='2'">周二</span>
            <span v-if="scope.row.scheduleWeekName=='3'">周三</span>
            <span v-if="scope.row.scheduleWeekName=='4'">周四</span>
            <span v-if="scope.row.scheduleWeekName=='5'">周五</span>
            <span v-if="scope.row.scheduleWeekName=='6'">周六</span>
            <span v-if="scope.row.scheduleWeekName=='7'">周日</span>
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          label="操作"
        >
          <template slot-scope="Scope">

            <el-button
              type="danger"
              icon="el-icon-delete"
              @click="handleDelete(Scope.row.scheduleId)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div id="pages">
        <el-pagination
          :current-page="currentPage"
          :page-sizes="[5, 10]"
          :page-size="pagesize"
          layout="total, sizes,prev, pager, next"
          :total="list.length"
          prev-text="上一页"
          next-text="下一页"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-dialog>
    <!----------------------------------------------------- 删除课程区域 弹框----------------------------------------------------->

  </div>

</template>
<script>

import { deleteSchedule, getSchedule, AddSchedule, getScheduleByclassId, batchAddSchedule, getAllSchedule, getAllRoomName, getAllClass, getStaffStringT } from '@/api/schedule'

import store from '@/store/index'

export default {
  data () {
    return {
      jurisdiction: '',
      staff: [],
      readValue: '',
      currentPage: 1, // 默认显示页面为1
      pagesize: 5, //    每页的数据条数
      studentId: '',
      // list: [],
      Class: [],
      listLoading: false,
      dialogFormVisible: false,
      dialogTableVisible: false,
      timeShow: true, // 编辑表与展示表
      teachers: [], // 全部教师
      tableList: [],
      sbjectKey: ['oneS', 'twoS', 'threeS', 'fourS', 'fiveS', 'sixS', 'sevenS', 'eightS', 'nineS', 'tenS', 'elevenS', 'twelveS', 'thirteenS'], // 科目key值
      teacherKey: ['oneT', 'twoT', 'threeT', 'fourT', 'fiveT', 'sixT', 'sevenT', 'eightT', 'nineT', 'tenT', 'elevenT', 'twelveT', 'thirteenT'], // 老师key值
      // 每天的课表
      timeData: [],
      staff0: [],
      room: [],
      classList: {},
      belongName: '', // 班级名
      belongId: '', // 班级id
      belongType: '803', // 803表示班级，教室804
      timeId: '',
      editType: 1, // 1 添加 2 修改
      formLabelWidth: '200px ',
      // 课节数据---标题
      titleData: [],
      stAAA: {},
      valueSwitch: false,
      search: {},
      rules: {
        // classCompletionTimes: [{ required: true, message: '上课次数不能为空', trigger: 'blur' }],
        // classCourseId: [{ required: true, message: '课程ID不能为空', trigger: 'blur' }],
        // classMedicalDirectorId: [{ required: true, message: '医疗主管ID不能为空', trigger: 'blur' }],
        // classResponsibleTeacherId: [{ required: true, message: '责任老师ID不能为空', trigger: 'blur' }],
        // classStatus: [{ required: true, message: '课程状态不能为空', trigger: 'blur' }],
        // classTeacherId: [{ required: true, message: '授课老师ID不能为空', trigger: 'blur' }],
        // classTeachingDirectorId: [{ required: true, message: '教学主管ID不能为空', trigger: 'blur' }],
        // classTimes: [{ required: true, message: '课时数量不能为空', trigger: 'blur' }],
        scheduleTeacherId: [{ required: true, message: '授课老师不能为空', trigger: 'blur' }],
        scheduleTimeDay: [{ required: true, message: '日期不能为空', trigger: 'blur' }],
        scheduleClassTime: [{ required: true, message: '第几节课不能为空', trigger: 'blur' }],
        scheduleClassId: [{ required: true, message: '班级不能为空', trigger: 'blur' }],
        scheduleRoomId: [{ required: true, message: '房间不能为空', trigger: 'blur' }],
        scheduleColor: [{ required: true, message: '请选择课程表颜色', trigger: 'blur' }],
        scheduleFontColor: [{ required: true, message: '请选择课程表字体颜色', trigger: 'blur' }]
      },
      weekName: [
        {
          value: 1,
          label: '周一'
        },
        {
          value: 2,
          label: '周二'
        },
        {
          value: 3,
          label: '周三'
        },
        {
          value: 4,
          label: '周四'
        },
        {
          value: 5,
          label: '周五'
        },
        {
          value: 6,
          label: '周六'
        },
        {
          value: 7,
          label: '周日'
        }
      ]

    }
  },
  rules: {
    scheduleTimeDay: [
      { required: true, trigger: 'change' }
    ]

  },

  computed: {
    // 根据计算属性模糊搜索
    list () {
      const searchTableInfo = this.searchTableInfo

      if (searchTableInfo) {
        // filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
        // 注意： filter() 不会对空数组进行检测。
        // 注意： filter() 不会改变原始数组。
        return this.tableList.filter(data => {
          // some() 方法用于检测数组中的元素是否满足指定条件;
          // some() 方法会依次执行数组的每个元素：
          // 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测;
          // 如果没有满足条件的元素，则返回false。
          // 注意： some() 不会对空数组进行检测。
          // 注意： some() 不会改变原始数组。
          return Object.keys(data).some(key => {
            // indexOf() 返回某个指定的字符在某个字符串中首次出现的位置，如果没有找到就返回-1；
            // 该方法对大小写敏感！所以之前需要toLowerCase()方法将所有查询到内容变为小写。
            return (
              String(data[key])
                .toLowerCase()
                .indexOf(searchTableInfo) > -1
            )
          })
        })
      }
      return this.tableList
    }
  },
  created () {
    this.jurisdiction = store.getters.roles[0]
    this.getAllclass()
  },
  methods: {
    // 每页下拉显示数据
    handleSizeChange: function (size) {
      this.pagesize = size
    },
    // 点击第几页
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage
    },
    handleClick (row) {

    },

    fetchData () {
      this.listLoading = true
      this.stAAA.classId = localStorage.getItem('staC')
      getScheduleByclassId(this.stAAA).then(data => {
        this.tableList = data.data.records
        this.listLoading = false
      })
    },

    handleClose () {
      this.dialogFormVisible = false
      this.staff = {}
    },
    handleCloseA () {
      this.dialogTableVisible = false
      this.staff = {}
    },
    handlejudge () {
      getAllRoomName(this.staff).then(res => {
        this.room = res.data
      })
      getStaffStringT(this.staff).then(res => {
        this.staff0 = res.data
      })
    },

    handleOpen (title, type, id) {
      this.staff = {}
      this.dialogFormVisible = true
      this.title = title
      this.editType = type
    },
    handleOpenA (title, type, id) {
      getAllSchedule().then(data => {
        this.tableList = data.data.records
        this.listLoading = false
      })
      this.stAAA = {}
      this.dialogTableVisible = true
      this.title = title
      this.editType = type
    },
    HandleAddSchedule (formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.stAAA.Time = this.staff.scheduleTimeDay
          this.stAAA.classId = this.staff.scheduleClassId
          if (this.valueSwitch === false) {
            AddSchedule(this.staff).then(resp => {
              this.$notify({
                title: '操作成功',
                type: 'success'
              })
              getScheduleByclassId(this.stAAA).then(data => {
                this.timeData = data.data.timeData
                this.titleData = data.data.titleData
                this.listLoading = true
              })
              this.staff = {}
              this.dialogFormVisible = false
              return true
            })
          } else {
            batchAddSchedule(this.staff).then(resp => {
              this.$notify({
                title: '操作成功',
                type: 'success'
              })
              getSchedule(this.stAAA).then(resp => {
                this.timeData = resp.data.timeData
                this.titleData = resp.data.titleData
              })
              this.stAAA = {}
              this.dialogFormVisible = false
              return true
            })
          }
          this.staff = {}
          this.dialogFormVisible = false
          return true
        } else {
          this.$notify({
            title: '请正确填写',
            type: 'error'
          })
          return false
        }
      })
    },
    handleDelete (id) {
      this.$confirm('确认删除该条排课？此条排课Id为' + id).then(() =>
        deleteSchedule(id).then(data => {
          this.$notify({
            title: '操作成功',
            type: 'success'
          })
          this.dialogTableVisible = false
          const totalPage = Math.ceil((this.list.length - 1) / this.pagesize)
          const page = this.currentPage > totalPage ? totalPage : this.currentPage
          this.currentPage = this.currentPage < 1 ? 1 : page
          this.titleData = []
          this.timeData = []
        })
      )
    },

    getSchedule (formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          getSchedule(this.search).then(resp => {
            this.timeData = resp.data.timeData
            this.titleData = resp.data.titleData
            this.search = {}
          })
          return true
        } else {
          this.$notify({
            title: '请正确填写',
            type: 'error'
          })
          return false
        }
      })
    },
    getAllclass () {
      getAllClass().then(res => {
        this.Class = res.data.records
      })
    }

  }
}
</script>

<style scoped>
.inline-block {
  display: inline-block;
}
#main {
  margin-left: 5px;
  margin-right: 5px;
}
#table-area {
  margin-left: 10px;
  margin-right: 10px;
}
</style>
